import debounce from "lodash/debounce";

const baseSize = 100
export function setRem() {

    // 如果分辨率在1920*1080上下波动，自适应
    if (document.documentElement.clientWidth > 1200 && document.documentElement.clientWidth < 2580) {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920 * baseSize + 'px';
    } else {
        document.documentElement.style.fontSize = '100px'
    }
}

// setRem();

// const debouncedSetRem = debounce(setRem, 200); // 延迟 200ms 执行

// window.removeEventListener('resize', debouncedSetRem);

// window.addEventListener('resize', debouncedSetRem);

/**
 * 图表数值类计算
 * @param val
 * @returns {number}
 */
export const setEchartsFontSize = (val) =>{

    if(document.documentElement.clientWidth === 3840) {
        return 1.5 * val;
    } else {
        return document.documentElement.clientWidth / 1920 * val;
    }
}

/**
 * HTML上width之类的转换
 * @param val
 * @returns {number}
 */
export const setHTMLSize = (val) =>{
    return document.documentElement.clientWidth / 1920 * val;
}

/**
 * HTML上height之类的转换
 * @param val
 * @returns {number}
 */
export const setHTMLSizeHeight = (val) =>{
    return document.documentElement.clientHeight / 968 * val;
}

/**
 * HTML上height之类的转换（动态换算）
 * @param val
 * @returns {number}
 */
export const setHTMLSizeHeightEcharts = (val) =>{
    return (document.documentElement.clientWidth / 1920 > document.documentElement.clientHeight / 1080) ?
        document.documentElement.clientHeight / 1080 * val : document.documentElement.clientWidth / 1920 * val;
}

/**
 * 针对topo
 * @param val
 * @returns {number}
 */
export const setSizeByTopo = (val) =>{

    if (document.documentElement.clientWidth >= 3800) {
        return (document.documentElement.clientWidth / 1920 > document.documentElement.clientHeight / 956) ?
            document.documentElement.clientHeight / 1260 * val : document.documentElement.clientWidth / 1912 * val;
    } else {
        return document.documentElement.clientWidth / 1920 * val;
    }
}

/**
 * 设置布局
 * @param val
 * @returns {string}
 */
export const setLayoutOperateSize = (val) =>{
    // 如果分辨率在1920*1080上下波动，自适应
    if (document.documentElement.clientWidth > 1200 && document.documentElement.clientWidth < 2580) {
        return document.documentElement.clientWidth / 1920 * val + 'px';
    } else {
        return val + 'px';
    }
}

/**
 * 监听某元素宽度改变
 * @param DOM
 * @param callback
 */
export const resizeObserverDOM = (DOM, callback) => {
    // 监听图表缩放
    const resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
            if (entry.target === DOM) {
                callback();
            }
        }
    });

    // 开始观察
    resizeObserver.observe(DOM);
}

/**
 * 重置字体大小为默认值，避免em单位异常
 */
export const resetFontSize = () => {
    document.documentElement.style.fontSize = '100px';
}
